<template>
  <div>
    <hreader :head_title="head_title" />
    <main>
      <div v-for="item in follow_list" :key="item.id">
        <van-swipe-cell>
          <div class="follow_list" @click="details(item.doctorId)">
            <img :src="item.imagePic" />
            <ul>
              <li>
                <span class="name">{{ item.name }}</span
                ><span class="cct">{{ item.jobTitle }}</span>
              </li>
              <li class="cct">{{ item.inauguralHospital }}/{{ item.departmentName }}</li>
              <li>
                <span>好评率{{ item.praiseNum }}%</span><span>服务患者数{{ item.number }}</span>
              </li>
            </ul>
          </div>
          <template #right>
            <van-button square text="取消关注" type="danger" class="delete-button" @click="delete_button(item.doctorId)" />
          </template>
        </van-swipe-cell>
      </div>
    </main>
  </div>
</template>

<script setup lang="ts">
import { useRouter } from 'vue-router'
import hreader from '@/components/header.vue'
import { getInterest } from '@/api/api'
import { getcancel } from '@/api/api'
import { ref } from 'vue'
import { Loading } from 'vant'
const head_title = '我的关注'
const router = useRouter()

const page = ref(1)
const count = ref(5)
const userId = ref(parseInt(localStorage.getItem('userId') as string))
const sessionId = ref(JSON.parse(localStorage.getItem('sessionId') as string))
const details = (doctorId) => {
router.push({ name: 'yisdetail', params: { doctorId: doctorId } })
}

// 获取关注的医生数据并渲染
const follow_list = ref([])
const follow_data = async () => {
  try {
    const res = await getInterest(userId.value, sessionId.value, {
      page: page.value,
      count: count.value,
    })
    console.log('用户收视频列表', res)
    Loading.value = true //开启加载动画
    console.log(res)
    follow_list.value = res.data.result
    console.log(follow_list.value)
  } catch (e) {
    console.log('数据获取失败')
  }
}
follow_data()


const delete_button=async(doctorId: number)=>{
    const res = await getcancel(userId.value, sessionId.value,doctorId)
    console.log('数据获取失败')
  console.log('取消关注')
  follow_data()
}
</script>

<style scoped lang="scss">
.follow_list {
  width: 80%; // 90% * 0.5
  height: 120px; // 240px * 0.5
  background-color: #fff;
  border: #ccc 0.5px solid; // 1px * 0.5
  border-radius: 7.5px; // 15px * 0.5
  box-shadow: 2.5px -2.5px 10px rgba(27, 27, 27, 0.1); // 各参数减半
  margin: 0 auto;
  display: flex;
  align-items: center;
  padding: 0 5px; // 10px * 0.5
  box-sizing: border-box;
  margin-top: 5px; // 10px * 0.5
  font-size: 12.5px; // 25px * 0.5
}
.follow_list img {
  width: 80px; // 160px * 0.5
  height: 90px; // 180px * 0.5
  /* border-radius: 50%; */
  margin-right: 7.5px; // 15px * 0.5
  box-shadow: 0.5px 2.5px 2.5px 2.5px rgba(207, 205, 205, 0.4); // 各参数减半
}
.follow_list li {
  margin: 12.5px; // 25px * 0.5
}

.follow_list li > span {
  margin: 0 12.5px 0 0; // 25px * 0.5
}

.name {
  font-size: 17.5px; // 35px * 0.5
}

.cct {
  font-size: 10px; // 20px * 0.5
}

.van-button:before {
  width: 40px; // 80px * 0.5
  height: 120; // 240 * 0.5
}
.van-button.van-button--danger.van-button--normal.van-button--square.delete-button {
  height: 120px; // 240px * 0.5
  width: 40px; // 80px * 0.5
}
</style>
